<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图添加页面</title>
    <link rel="stylesheet" href="__LAYUI__/css/layui.css">
    <style>
    </style>
</head>


<body>

    <div class="layui-container" style="margin-top: 20px;">
        <form class="layui-form" action="" method="post">

            <div class="layui-form-item">
                <label class="layui-form-label">跳转链接</label>
                <div class="layui-input-block">
                    <input type="url" name="url" class="layui-input" placeholder="跳转链接" value="" >
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <textarea name="desc" required placeholder="请输入轮播图描述" class="layui-textarea"></textarea>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">跳转类型</label>
                <div class="layui-input-block">
                    <select name="type" required lay-verify="required">
                        <option value="">跳转类型</option>
                        <option value="1">Iframe</option>
                        <option value="2">App页面</option>
                        <option value="3">浏览器</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <select name="status" required lay-verify="required">
                        <option value="1" selected>正常</option>
                        <option value="0">下架</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">权重</label>
                <div class="layui-input-block">
                    <input type="number" name="sort" value="100" class="layui-input" required lay-verify="required">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">上传图片</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="uploadImages">上传图片</button>
                    <div id="imagePreview" style="margin-top: 10px;"></div>
                    <input type="hidden" name="path" id="images">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="addGoods">提交</button>
                </div>
            </div>
        </form>
    </div>
    <script src="__LAYUI__/layui.js"></script>
    <script>
        layui.use(['form', 'upload'], function () {
            var form = layui.form,
                upload = layui.upload;
            $ = layui.$
            upload.render({
                elem: '#uploadImages',
                url: '/admin/carousel/uploadImg' // 假设的上传接口
                , accept: 'file'
                , done: function (res) {
                    if (res.code === 200) {
                        $('#images').val(res.data.src);
                        var imagePreview = $('#imagePreview');
                        imagePreview.empty();
                        imagePreview.append(`<div class="image-item">
                            <img src="${res.data.src}" style="width: 100px; margin-right: 10px;" />
                        </div>`);
                    } else {
                        layer.msg('上传失败：' + res.message);
                    }
                }
                , error: function () {
                    layer.msg('上传出现错误');
                }
            });


            form.on('submit(addGoods)', function (data) {
                if (data.field.path == "") {
                    layer.msg('请上传图片')
                    return false
                }
                $.post('/admin/carousel/doAdd', data.field, function (response) {
                    if (response.code === 200) {
                        layer.msg('轮播图添加成功');
                    } else {
                        layer.msg('轮播图添加失败：' + response.msg);
                    }
                });
                return false;
            });
        });

    </script>

</body>

</html>